<template>
  <div class="module">
    <div class="title">到期金额月度分布</div>
    <div class="content">
      <div class="top">
        <span>交易大类&nbsp;&nbsp;</span>
        <el-select
          v-model="selectedValue"
          clearable
          placeholder="请选择"
          @change="selectedChange"
        >
          <el-option
            v-for="item in options"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          >
          </el-option>
        </el-select>
        <el-radio-group
          v-model="statisticsRadio2"
          size="mini"
          border="true"
          style="margin-left: auto"
          @change="statisticsRadio2Fn"
        >
          <el-radio-button label="今年以来"></el-radio-button>
          <el-radio-button label="近一年"></el-radio-button>
          <el-radio-button label="近三年"></el-radio-button>
          <el-radio-button label="全部"></el-radio-button>
        </el-radio-group>
        <div style="margin-left: 10px">
          <el-date-picker
            v-model="datePicker"
            type="monthrange"
            range-separator="-"
            start-placeholder="开始"
            end-placeholder="结束"
            @change="datePickerChange"
          >
          </el-date-picker>
        </div>
      </div>
      <div class="table_echarts">
        <el-row>
          <el-col :span="10">
            <div class="table">
              <el-table :data="tableData" style="width: 100%">
                <el-table-column
                  label="月份"
                  width="80px"
                  align="center"
                  prop="maturityMonth"
                >
                </el-table-column>
                <el-table-column
                  prop="monthlyMaturityAmount"
                  label="到期金额"
                  align="center"
                >
                </el-table-column>
              </el-table>
            </div>
          </el-col>
          <el-col :span="14">
            <div id="monthlyDistribution"></div>
          </el-col>
        </el-row>
      </div>
    </div>
  </div>
</template>

<script>
import moment from 'moment';
import * as echarts from 'echarts';
import {
  getTradeTypes,
  getMaturityAmountMonthlyDistribution,
  getMaturityAmountDailyDistribution,
} from '@/api/customerManagement/tradeInformation';
export default {
  data() {
    return {
      selectedValue: '',
      statisticsRadio2: '今年以来',
      tableData: [],
      datePicker: '',
      startDate: '',
      endDate: moment().format('YYYYMMDD'),
      dateInterval: [],
      options: [],
      echartsData: [],
      customerId: '',
    };
  },
  mounted() {
    this.customerId = this.$route.query.customerId;
    this.statisticsRadio2Fn();
    this.getTradeTypesData();
  },
  methods: {
    async getTradeTypesData() {
      const { data } = await getTradeTypes();
      this.options = data.records.map((item) => {
        return {
          label: item,
          value: item,
        };
      });
    },
    // 表格数据
    async getMaturityAmountMonthlyDistributionData(params = {
        startDate: this.startDate,
        endDate: this.endDate,
        counterpartyId: this.customerId,
        tradeType: this.selectedValue,
      }) {
      const { data } = await getMaturityAmountMonthlyDistribution(params);
      this.tableData = data.records;
    },
    async getTradeTypesData() {
      const { data } = await getTradeTypes();
      this.options = data.records.map((item) => {
        return {
          label: item,
          value: item,
        };
      });
    },
    // 图表数据
    async getMaturityAmountDailyDistributionData(params = {
        startDate: this.startDate,
        endDate: this.endDate,
        counterpartyId: this.customerId,
        tradeType: this.selectedValue,
      }) {
      const { data } = await getMaturityAmountDailyDistribution(params);
      const resultData = data.records.map((item) => {
        return item.monthlyMaturityAmount || 0;
      });
      console.log('图标数据',data.records);
      this.echartsData = resultData;
      // this.tableData = data.records;
    },
    async selectedChange(val) {
      this.selectedValue = val;
      this.getMaturityAmountMonthlyDistributionData();
      this.getMaturityAmountDailyDistributionData();
      this.monthlyDistributionInit();
    },
    monthlyDistributionInit() {
      console.log('this.echartsData',this.echartsData);
      let chartDom = document.getElementById('monthlyDistribution');
      let myChart = echarts.init(chartDom);
      let option;
      option = {
        grid: {
          left: '12%', // 左侧的距离
          right: '7%', // 右侧的距离
          bottom: '7%', // 底部的距离
        },
        xAxis: {
          type: 'category',
          boundaryGap: false,
          tooltip: {
            trigger: 'axis',
          },
          data: this.dateInterval,
          axisLabel: {
            color: '#fff',
          },
          axisLine: {
            lineStyle: {
              color: '#fff',
            },
          },
          axisLabel: {
            interval: this.scaleIntervalFn(),
            color: '#fff', // 刻度标签字体颜色
          },
        },
        yAxis: {
          type: 'value',
          axisLabel: {
            color: '#fff',
          },
          // min: 0,
          // max: 25,
          // interval: 5,
          axisLine: {
            show: false,
          },
        },
        series: [
          {
            data: this.echartsData,
            type: 'line',
            lineStyle: {
              color: '#fff',
              width: 1,
            },
            symbol: 'none',
          },
        ],
      };
      myChart.setOption(option);
    },
    getDateSection() {
      // 定义开始和结束日期
      const startDate = moment(this.startDate);
      const endDate = moment();
      const dateArr = [];
      // 初始化当前日期
      let currentDate = startDate.clone();

      // 循环直到结束日期
      while (currentDate.isBefore(endDate)) {
        dateArr.push(currentDate.format('YYYY-MM-DD'));
        currentDate.add(1, 'months'); // 将当前日期增加一个月
      }
      this.dateInterval = dateArr;
    },
    async statisticsRadio2Fn(value = '今年以来') {
      const today = moment();
      switch (value) {
        case '今年以来':
          // 获取一年前的日期
          const YearAgo = today.startOf('years').format('YYYYMMDD');
          this.startDate = YearAgo;
          break;
        case '近一年':
          // 获取一年前的日期
          const oneYearAgo = today.subtract(1, 'years').format('YYYYMMDD');
          this.startDate = oneYearAgo;
          break;
        case '近三年':
          // 获取一年前的日期
          const threeYearAgo = today.subtract(3, 'years').format('YYYYMMDD');
          this.startDate = threeYearAgo;
          break;
        case '全部':
          this.startDate = '';
          this.endDate = '';
          break;
        default:
          break;
      }
      this.getDateSection();
      this.getMaturityAmountMonthlyDistributionData();
      this.getMaturityAmountDailyDistributionData();
      this.monthlyDistributionInit();
    },
    scaleIntervalFn() {
      if (this.statisticsRadio2 === '今年以来') {
        return 0;
      } else if (this.statisticsRadio2 === '近一年') {
        return 2;
      } else if (this.statisticsRadio2 === '近三年') {
        return 6;
      }
    },
    datePickerChange(date) {
      if (!date) return;
      this.startDate = moment(date[0]).format('YYYYMMDD');
      this.endDate = moment(date[1]).format('YYYYMMDD');
      this.statisticsRadio2 = '';
      this.getMaturityAmountMonthlyDistributionData();
      this.getMaturityAmountDailyDistributionData();
      this.monthlyDistributionInit();
    },
  },
};
</script>

<style lang="scss" scoped>
.module {
  padding: 14px;
}
.content {
  border: 1px solid #39517f;
  padding: 14px;
  .top {
    display: flex;
    align-items: center;
    margin-bottom: 10px;
  }
}
.group_table {
  display: flex;
  justify-content: space-around;
}
.title {
  line-height: 18px;
  border-left: 5px solid #08b0f0;
  padding-left: 16px;
  display: flex;
  justify-content: space-between;
  margin-bottom: 10px;
}
.table {
  margin-top: 10px;
  border: 1px solid #39517f;
}
.table_echarts {
  .pie_echarts {
    width: 100%;
  }
}
#monthlyDistribution {
  width: 100%;
  flex: 1;
  height: 320px;
}
</style>
